<template>
  <div class="list-wapper">
    <div class="query__top">
      <el-row :gutter="20">
        <el-col :span="6">
          <span class="query__label">姓 名：</span>
          <el-input v-model="query.username" class="query-input" placeholder="请输入姓名"/>
        </el-col>
        <el-col :span="6">
          <span class="query__label">角 色：</span>
          <el-input v-model="query.roleName" class="query-input" placeholder="请输入角色名"/>
        </el-col>
        <el-col :span="6">
          <span class="query__label">状 态：</span>
          <el-select v-model="query.status" class="query-input" placeholder="请选择状态">
            <el-option
              v-for="(item, index) in AccountStatusOptions"
              :value="item.value"
              :label="item.label"
              :key="index"
            />
          </el-select>
        </el-col>
        <!-- <el-col :span="6"><div class="grid-content bg-purple"/></el-col> -->
      </el-row>
      <el-row :gutter="20" class="button-content">
        <el-col :span="6">
          <router-link :to="{name: 'AccountCreate'}">
            <el-button size="small" type="primary">新增账户</el-button>
          </router-link>
        </el-col>
        <el-col :span="6" :offset="12" class="query__right-content">
          <el-button size="small" type="primary" @click="handleSelect">查询</el-button>
          <el-button size="small" @click="handleReset">重置</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table v-loading="loading" :data="list" size="small" style="width: 100%">
      <el-table-column prop="username" label="账号" width="150"/>
      <el-table-column prop="name" label="姓名" width="120"/>
      <el-table-column prop="role" label="角色"/>
      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          {{ scope.row.status | accountStatusFormat }}&nbsp;&nbsp;
          <AsyncSwitch
            :before-change-sync-other-params="[scope.row]"
            :before-change-sync="changeOperationAccountStatus"
            v-model="scope.row.status"
            :inactive-value="0"
            :active-value="1" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small">
            <router-link :to="{ name:'AccountUpdate', query: { userId: scope.row.userId } }">修改</router-link>
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="handleResetPassword(scope.row)"
          >重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="totalCount && totalCount > 0" class="list-pagaps">
      <el-pagination
        :current-page="query.pageIndex || 1"
        :page-sizes="PageSizeArr"
        :page-size="pageOffset"
        :total="totalCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
      <div/>
    </div>
  </div>

</template>
<script>
import { cloneDeep } from 'lodash'
import ErrorView from '@/components/ErrorView/index'
import LoadingView from '@/components/LoadingView/index'
import AsyncSwitch from '@/components/AsyncSwitch/index'
import { ACCOUNT_STATUS, PAGE_SIZE_ARR } from '@/common/dictory'
const QueryInitValue = {
  username: '',
  roleName: '',
  status: 2,
  pageIndex: 1
}
export default {
  name: 'AccountManage',
  components: { ErrorView, LoadingView, AsyncSwitch },
  filters: {

  },
  data() {
    return {
      loading: true,
      loadFailed: false,
      query: cloneDeep(QueryInitValue),
      totalCount: 0,
      pageOffset: 10
    }
  },
  computed: {
    AccountStatusOptions() {
      return cloneDeep(ACCOUNT_STATUS || [])
    },
    PageSizeArr() {
      return cloneDeep(PAGE_SIZE_ARR || [10, 20, 30, 40])
    }
  },
  created() {
    this._loadData()
  },
  methods: {
    handleSelect() {
      this._loadData()
    },
    handleReset() {
      this.query = cloneDeep(QueryInitValue)
    },
    handleSizeChange(pageOffset = 10) {
      this.query.pageIndex = 1
      this.pageOffset = pageOffset
      this._loadData()
    },
    handleCurrentChange(pageIndex = 1) {
      this.query.pageIndex = pageIndex
      this._loadData()
    },
    handleResetPassword({ userId }) {
      this.$confirm('重置当前用户密码？', '重置密码', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$store.dispatch('authManage/resetAccountPassword', { userId }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        }).catch(msg => {
          this.$message({
            type: 'error',
            message: msg
          })
        })
      }).catch(() => {

      })
    },
    changeOperationAccountStatus(nextStatus, status, { userId }) {
      return new Promise((resolve, reject) => {
        this.$confirm(`${status === 1 ? '停用' : '启用'}当前账户？`, '账户管理', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.$store.dispatch('authManage/changeOperationAccountStatus', { userId, status: nextStatus }).then(() => {
            // this.$message({
            //   type: 'success',
            //   message: '操作成功'
            // })
            resolve()
          }).catch(msg => {
            this.$message({
              type: 'error',
              message: msg
            })
            reject()
          })
        }).catch(() => {
          reject()
        })
      })
    },
    _loadData() {
      var { pageOffset = 10 } = this
      this.loading = true
      this.loadFailed = false
      this.list = []
      this.$store.dispatch('authManage/getAccountList', {
        ...this.query,
        pageOffset
      }).then(({ rows = [], pageInfo = {}}) => {
        var {
          totalCount = 0
        } = pageInfo || {}
        this.totalCount = totalCount
        this.loading = false
        this.loadFailed = false
        this.list = rows
      }).catch(() => {
        this.loading = false
        this.loadFailed = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// @import url('~@styles/btn.scss');
.list-wapper {
  padding: 20px;
}
.query__top {
  padding-bottom: 20px;
}
.query-input {
  width: calc(100% - 50px);
}
.button-content {
  margin-top: 20px;
}
.query__right-content {
  text-align: right;
}
.list-pagaps{
    text-align: right;
    padding-top:20px;
}
.query__label{
    font-weight: 600;
}
</style>

